<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="__STATIC__/layui/css/layui.css" media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<div class="demoTable">
    搜索昵称：
    <div class="layui-inline">
        <input class="layui-input" name="nickname" id="demoReload" autocomplete="off">
    </div>
    <button class="layui-btn" data-type="reload">搜索</button>
</div>
<table class="layui-hide" id="test" lay-filter="test"></table>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">批量删除</button>
        <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
        <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
    </div>
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>


<script src="__STATIC__/layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->

<script>
    layui.use('table', function () {
        var table = layui.table;

        var token = localStorage.getItem('token');

        table.render({
            elem: '#test'
            , url: 'http://www.1906a.com/admin/admin/ajaxAdminList?token=' + token
            , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            , defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                title: '提示'
                , layEvent: 'LAYTABLE_TIPS'
                , icon: 'layui-icon-tips'
            }]
            , title: '用户数据表'
            , cols: [[
                {type: 'checkbox', fixed: 'left'}
                , {field: 'id', title: 'ID', width: 80, fixed: 'left', unresize: true, sort: true}
                , {field: 'username', title: '用户名', width: 120, edit: 'text'}
                , {
                    field: 'email', title: '邮箱', width: 150, edit: 'text', templet: function (res) {
                        return '<em>' + res.email + '</em>'
                    }
                }
                , {field: 'nickname', title: '昵称', width: 80, edit: 'text', sort: true}
                , {
                    field: 'last_login_time', title: '上次登录时间', width: 200
                }
                , {
                    field: 'status', title: '状态', templet: function (res) {
                        if (res.status == 1) {
                            return '可用';
                        } else if (res.status == 2) {
                            return '禁用';
                        } else {
                            return '待审核';
                        }
                    }
                }
                , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150}
            ]]
            , page: true
            , limit: 3 //每页显示条数
            , limits: [3, 5, 7]
            , id: 'testReload'
        });

        //头工具栏事件
        table.on('toolbar(test)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'getCheckData':
                    var data = checkStatus.data;
                    var ids = [];
                    $.each(data,function (i,v) {
                        ids.push(v.id);
                    })
                    $.ajax({
                        'url': 'http://www.1906a.com/admin/admin/ajaxDel?token=' + token,
                        'data': {
                            id: ids
                        },
                        'type': 'DELETE',
                        'dataType': 'JSON',
                        'success': function (res) {
                            console.log(res);
                            if (res.code == 200) {
                                table.reload('testReload');
                            }
                        },
                        'error': function (error) {
                            console.log(error)
                        },
                    });
                    break;
                case 'getCheckLength':
                    var data = checkStatus.data;
                    layer.msg('选中了：' + data.length + ' 个');
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选' : '未全选');
                    break;

                //自定义头工具栏右侧图标 - 提示
                case 'LAYTABLE_TIPS':
                    layer.alert('这是工具栏右侧自定义的一个图标按钮');
                    break;
            }
            ;
        });

        //监听行工具事件
        table.on('tool(test)', function (obj) {
            var data = obj.data;

            if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    //ajax删除
                    $.ajax({
                        'url': 'http://www.1906a.com/admin/admin/ajaxDel?token=' + token,
                        'data': {
                            id: data.id
                        },
                        'type': 'DELETE',
                        'dataType': 'JSON',
                        'success': function (res) {
                            console.log(res);
                            if (res.code == 200) {
                                obj.del(); //删除行
                                layer.close(index); //关闭弹框
                            }
                        },
                        'error': function (error) {
                            console.log(error)
                        },
                    });
                });
            } else if (obj.event === 'edit') {
                layer.prompt({
                    formType: 2
                    , value: data.email
                }, function (value, index) {
                    obj.update({
                        email: value
                    });
                    layer.close(index);
                });
            }
        });

        var $ = layui.$, active = {
            reload: function () {
                var demoReload = $('#demoReload');

                //执行重载
                table.reload('testReload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    , where: {
                        nickname: demoReload.val()
                    }
                });
            }
        };

        $('.demoTable .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });
</script>

</body>
</html>